<script setup>
import { ref, reactive, onMounted } from "vue"
import { useRouter } from "vue-router"
import { getUserList, createUser,existUser } from "@/api/user"
import {ElMessage} from "element-plus"
const registerRef = ref()

const router = useRouter()

onMounted(() => {
})

const ruleForm = reactive({
  username: "",
  pwd: "",
  rePwd: ""
})

const validUsername = (rule, value, callback) => {
  const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

  if (value == '') {
    callback(new Error("请输入邮箱"))
  }
  else if (!reg.test(value)) {
    callback(new Error("输入的正确的邮箱"))
  } else {
    existUser({name: value}).then(res => {
      if(res.data == true) {
        callback(new Error("此邮箱已经存在，请重新输入"))
      } else {
        callback();
      }
    })
  }
  
}

const validPass = (rule, value, callback) => {
  const reg = /^[0-9a-zA-Z]{3,20}/
  if (value == '') {
    callback(new Error("请输入密码"))
  }
  else if (!reg.test(value)) {
    callback(new Error("输入的密码由0-9的数字以及26个大小写字母构成，长度为3-20位"))
  } 
  else {
    callback();
  }
}

const validRePwd = (rule, value, callback) => {

  if (value == '') {
    callback(new Error("请输入密码"))
  }
  else if (ruleForm.rePwd !== ruleForm.pwd) {
    callback(new Error("两次输入密码不一致"))
  }
  callback();
}

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { validator: validUsername, trigger: 'blur' }
  ],
  pwd: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: validPass, trigger: 'blur' }
  ],
  rePwd: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: validRePwd, trigger: 'blur' }
  ]
}

const doRegister = (formEl) => {
  
  formEl.validate((valid) => {
    
    if (valid) {
      createUser(ruleForm).then(res=>{
        ElMessage.success("注册成功");
        formEl.resetFields()
        router.push({path: "/login"})
      })
    } else {
      alert('error submit!')
    }
  })
}

</script>
<template>
  <el-container>
    <el-main class="register_main">
      <div class="register_left">
        <div class="register_form">
          <h1 style="font-size: 38px;">注册</h1>
          <p style="margin-bottom: 40px; margin-top: 10px;">很高兴再次见到您！</p>

          <el-form ref="registerRef" :model="ruleForm" :rules="rules" label-width="auto"
            label-position="top">
            <el-form-item label="邮箱" prop="username">
              <el-input v-model="ruleForm.username" />
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
              <el-input v-model="ruleForm.pwd" type="password" />
            </el-form-item>
            <el-form-item label="确认密码" prop="rePwd">
              <el-input v-model="ruleForm.rePwd" type="password" />
            </el-form-item>
            <div style="margin: 10px 0;">
              已经有帐户？<el-link type="primary" @click="router.push({ path: '/login' })">登录</el-link>
            </div>
            <el-form-item>
              <el-button style="width: 100%;" type="primary" @click="doRegister(registerRef)">注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="register_right">

      </div>
    </el-main>
  </el-container>
</template>
<style scoped>
.register_main {
  display: flex;
  padding: 0;
  margin: 0;
}

.register_left {
  height: 100vh;
  width: 40%;
}

.register_right {
  width: 60%;
  background: url("@/assets/login-background.53821b0f.svg") no-repeat;
  background-size: cover;
}

.register_form {
  width: 60%;
  margin: auto;
  margin-top: 30%;
}
</style>